<template>
	<view class="Box">
		<view v-if="loginBoole" class="headBox">
			<view class="loginBox" @click="loginClick">
				去登录
			</view>
		</view>
		<view v-else class="headBox">
			<view class="avatar">
				<image
					:src="userinfo.avatar ? userinfo.avatar :'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file400c2da68da04dd8a43653c0918ac421.png'"
					class="avatarImg"></image>
			</view>
			<view class="name">
				<view class="nameTop">
					{{ userinfo.nickName ? userinfo.nickName : userinfo.phone }}
				</view>
				<!-- <view class="nameBootom">
					个人总里程：{{ Math.ceil(userinfo.mileage / 100) / 10 }} km
				</view> -->
			</view>
			<u-icon color="#fff" name="arrow-right" size="24" @click="informationClick"></u-icon>
		</view>

		<!-- <view class="orderBox">
			<view class="titleBox">
				<view class="titleLeft">
				</view>
				<view class="titleRight">
					我的订单
				</view>
			</view>
			<view class="orderList">
				<view v-for="(item,index) in orderList" :key="index" class="">
					<view class="orderItem" @click="orderClick(index)">
						<view class="imgBox">
							<image :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${item.image}.png`"
								class="orderImg">
							</image>
						</view>

						<view class="name">
							{{ item.name }}
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="orderBox">
			<view class="titleBox">
				<view class="titleLeft">
				</view>
				<view class="titleRight">
					常用功能
				</view>
			</view>
			<view class="functionList">
				<view v-for="(item,index) in functionList" class="">
					<view :class="['functionItem',(index - 3) % 4 == 0?'nothingMargin':'']"
						@tap="menuClick(index,item.url)">
						<view class="imgBox">
							<image :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${item.image}.png`"
								class="functionImg">
							</image>
						</view>

						<view class="name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderBox">
			<view class="titleBox">
				<view class="titleLeft">
				</view>
				<view class="titleRight">
					工作台
				</view>
			</view>
			<view class="functionList">
				<view v-for="(item,index) in WorkbenchList" class="">
					<view :class="['functionItem',(index - 3) % 4 == 0?'nothingMargin':'']"
						@click="WorkbenchClick(index)">
						<view class="imgBox">
							<image :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${item.image}.png`"
								class="functionImg">
							</image>
						</view>

						<view class="name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="orderBox">
			<view class="titleBox">
				<view class="titleLeft">
				</view>
				<view class="titleRight">
					去运动模块
				</view>
			</view>
			<view class="functionList">
				<view v-for="(item,index) in motionList" class="">
					<view v-if="index != 2 || userinfo.authentication != 0"
						:class="['functionItem',(index - 3) % 4 == 0?'nothingMargin':'']"
						@click="motionClick(index,item.url)">
						<view class="imgBox">
							<image :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${item.image}.png`"
								class="functionImg">
							</image>
						</view>

						<view class="name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 200rpx;">

		</view>
		<tabbar :index="3"></tabbar>
		<zy-modal></zy-modal>
	</view>
</template>

<script>
	import {
		queryAuthentication,
		queryByUserPhoneMessageList,
		editWxUserInfo,
		queryUserInfoByPhone,
		loginOut
	} from '@/api/login.js'
	import tabbar from '@/components/tabbar.vue'

	export default {
		data() {
			return {
				userinfo: {
					phone: "***"
				},
				orderList: [{
					name: '未付款',
					image: 'orderOne',
					redDot: 'false',
				}, {
					name: '待出行',
					image: 'orderTwo',
					redDot: 'false',
				}, {
					name: '退款售后',
					image: 'orderThree',
					redDot: 'false',
				}, {
					name: '全部订单',
					image: 'orderFour',
					redDot: 'false',
				}, ],

				functionList: [
					// 	{
					// 	name: '创建路线',
					// 	image: 'functionOne',

					// },
					{
						name: '旅程计划',
						image: 'functionTwo',
						url: "/pages/tourplan/index"
					}, {
						name: '行程报告',
						image: 'functionThree',
						url: "/pages/my/reportList/reportList"
					},
					// {
					// 	name: '个人景点',
					// 	image: 'functionFour',

					// }, {
					// 	name: '个人任务',
					// 	image: 'functionFive',

					// },
					{
						name: '家长中心',
						image: 'functionSix',
						url: "/pages/my/reportList/ParentsList"
					},
				],
				WorkbenchList: [{
					name: '路线管理',
					image: 'WorkbenchOne',

				}, {
					name: '商品核销',
					image: 'WorkbenchTwo',

				}, ],
				motionList: [{
					name: '订场订单',
					image: 'functionThree',
					url: "/subpackageOne/venueRelated/BookingVenue/BookingVenue"
				}, {
					name: '商品订单',
					image: 'functionThree',
					url: "/subpackageOne/venueRelated/commodityOrder/commodityOrder"
				}, {
					name: '运动核销',
					image: 'WorkbenchTwo',

				}, ],
				loginBoole: false
			}
		},
		components: {
			tabbar
		},
		onShow() {
			if (uni.getStorageSync("userinfo").phone) {
				this.loginBoole = false
			} else {
				this.loginBoole = true
			}
			this.init()
		},
		methods: {
			motionClick(index, url) {
				if (index == 2) {
					uni.scanCode({
						success: function(res) {
							uni.navigateTo({
								url: "/" + res.path
							});
							console.log('输出res', res);
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			/**工作台跳转 */
			WorkbenchClick(index) {
				console.log(index);
				if (index == 0) {
					uni.navigateTo({
						url: './routeManager/routeManager'
					})

				} else if (index == 1) {
					uni.scanCode({
						success: function(res) {
							uni.navigateTo({
								url: "/" + res.path
							});
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				}
			},
			loginClick() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			orderClick(index) {
				uni.navigateTo({
					url: '/pages/my/orderList/orderList?type=' + index
				});
			},
			//常用功能点击
			menuClick(index, url) {
				if (index == 0) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			informationClick() {
				uni.navigateTo({
					url: '/pages/my/information/information'
				});
			},
			init() {
				queryUserInfoByPhone({
					phone: uni.getStorageSync("userinfo").phone,
				}).then(res => {
					this.userinfo = res
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		padding: 32rpx;
	}

	.headBox {
		width: 622rpx;
		height: 128rpx;
		background: linear-gradient(314deg, #4186f5 1%, #5593f6 87%);
		border-radius: 6rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.10);
		display: flex;
		justify-content: space-between;
		padding: 32rpx;

		.loginBox {
			width: 100%;
			line-height: 128rpx;
			font-size: 60rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC-Heavy;
			color: #fff;
		}

		.avatar {
			width: 128rpx;
			height: 128rpx;
			background-color: #fff;
			border-radius: 50%;

			.avatarImg {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.name {
			flex: 1;
			margin-left: 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			.nameTop {
				font-size: 36rpx;
				font-weight: 800;
				margin: 16rpx 0 12rpx 0;
			}

			.nameBootom {}
		}
	}

	.orderBox {
		width: 622rpx;

		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.10);
		padding: 32rpx;
		margin: 32rpx 0;

		.titleBox {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #eeeeee;
			padding-bottom: 18rpx;

			.titleLeft {
				width: 4rpx;
				height: 32rpx;
				background: #4186f5;
			}

			.titleRight {
				font-weight: 800;
				color: #101010;
				margin-left: 20rpx;
			}
		}

		.orderList {
			display: flex;
			justify-content: space-between;
			padding-top: 22rpx;

			.orderItem {
				width: 112rpx;

				.imgBox {
					width: 72rpx;
					height: 72rpx;
					border-radius: 32px;
					background: radial-gradient(#4186f5, #3373d9);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: auto;

					.orderImg {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.name {
					margin-top: 20rpx;
					font-size: 28rpx;
					text-align: center;

				}
			}
		}

		.functionList {
			display: flex;
			flex-wrap: wrap;

			.functionItem {
				width: 112rpx;
				margin-right: 58rpx;
				margin-top: 22rpx;

				.imgBox {
					width: 80rpx;
					height: 80rpx;
					margin: auto;

					.functionImg {
						width: 80rpx;
						height: 80rpx;

					}
				}


				.name {
					font-size: 28rpx;
					text-align: center;
				}
			}

			.nothingMargin {
				margin-right: 0;
			}
		}
	}
</style>